<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
    <style>
        body {
            margin: 0
        }

        .h10 {
            width: 100%;
            height: 0.5rem;
            display: -webkit-box;
            clear: both;
            background: #f5f5f5
        }
        .clearfix::after {
          content: '';
          display: block;
          height: 0;
          clear: both;
        }
        .fl {
          float: left;
        }
        .fr {
          float: right;
        }
        #pro1-swiper {
            height: 10rem;
        }

        .aui-col-xs-3 img {
            width: 40%;
            display: block;
            margin: auto;
        }
        .dhq {
          background: #fff;
          padding: 1rem 0.75rem;
        }
        .dhq_tit h3 {
          font-size: 1.2rem;
          color: #333;
        }
        .dhq_tit h5 {
          font-size: 0.6rem;
          color: #999;
        }
        .dhq_tit h4 {
          font-size: 0.8rem;
          color: #666;
          margin-top: 0.5rem;
        }
        .dhq_img {
          margin: 1rem 0;
          padding: 0 10%;
        }
        .dhq_img img {
          width: 100%;
        }
        .dhq_text h4 {
          font-size: 0.65rem;
        }
        .dhq_text h5 {
          font-size: 0.7rem;
        	line-height: 1.6rem;
        	color: #ff6565;
        }
        .near_price {
          font-size: 1rem;
          color: #ff6565;
        }
        .near_price i {
          font-size: 0.6rem;
          line-height: 0.6rem;
          height: 0.6rem;
          color: #666;
          font-style: normal;
          margin-left: 0.1rem;
          margin-top: 0.55rem;
        }
        .aui-list .aui-list-item-text.near_jj {
          height: 1rem;
          line-height: 1rem;
          overflow: hidden;
        }
        .aui-list .aui-list-item-text.near_pj {
          height: 1rem;
          line-height: 1rem;
          overflow: hidden;
          -webkit-box-pack: initial;
           -webkit-justify-content: initial;
           justify-content: initial;
        }
        .aui-list .aui-list-item-text.near_pj img {
          width: 0.6rem;
          margin-right: 0.2rem;
          display: inline-block;
        }
        .near .near_title {
          position: relative;
          padding: 0.5rem 0.75rem;
          width: 100%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-flex: 1;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;
          background: #fff;
        }
        .near .near_title_r {
          margin-right: 1rem;
          font-size: 0.7rem;
          color: #666;
          /*position: relative;*/
        }
        .near .near_title_r::before {
          -webkit-transform: rotateZ(315deg);
          transform: rotateZ(315deg);
          margin-top: -0.3rem;
          content: '';
          width: 0.4rem;
          height: 0.4rem;
          position: absolute;
          top: 50%;
          right: 0.75rem;
          background: transparent;
          border: 1px solid #dddddd;
          border-top: none;
          border-right: none;
          z-index: 2;
          -webkit-border-radius: 0;
          border-radius: 0;
          transition: all 0.4s ease;
          -webkit-transition: all 0.4s ease;
        }
        .near .near_title span {
          font-size: 0.7rem;
          color: #666;
        }
        .near .near_title span.active {
          font-weight: bold;
          font-size: 0.8rem;
          color: #333;
        }
        .aui-col-xs-3:nth-child(4n + 1) {
          clear: both;
        }
        .near_sort_list {
          width: 100%;
          background: #fff;
          max-height: 0;
          overflow: hidden;
          transition: all 0.4s ease;
          -webkit-transition: all 0.4s ease;
          position: absolute;;
          z-index: 9;
        }
        .near_sort_list li {
          border-bottom: 1px solid #e8e8e8;
          padding: 0.5rem 0.75rem;
          font-size: 0.6rem;
        }
        .near.sort .near_sort_list {
          max-height: 500px;
        }
        .near.sort .near_title_r::before {
          -webkit-transform: rotateZ(135deg);
          transform: rotateZ(135deg);
        }
    </style>
</head>

<body>
    <div>
        <div id="pro1-swiper" class="swiper-container" style="background:#e8e8e8"></div>
        <section class="aui-grid">
            <div class="aui-row">
                <div class="aui-col-xs-3">
                  <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                </div>
                    <div class="aui-col-xs-3">
                      <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                    </div>
                        <div class="aui-col-xs-3">
                          <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                        </div>
                            <div class="aui-col-xs-3">
                              <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                            </div>
                                <div class="aui-col-xs-3">
                                  <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                                </div>
                                    <div class="aui-col-xs-3">
                                      <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                                    </div>
                                        <div class="aui-col-xs-3">
                                          <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                                        </div>
                                            <div class="aui-col-xs-3">
                                              <div style="background: #e8e8e8;height: 3rem;width: 60%;margin: auto;"></div>
                                            </div>
            </div>
        </section>
        <div class="h10"></div>
        <div class="dhq">
          <div class="dhq_tit clearfix">
            <div class="fl">
              <h3>兑换区</h3>
              <h5>兑换币专享 好货换不停</h5>
            </div>
            <div class="fr">
              <h4>查看更多</h4>
            </div>
          </div>
          <div class="swiper-container dhq_box">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="dhq_img" style="background:#e8e8e8;height: 5rem">
                  <!-- <img src="../../image/two/cp1.jpg" alt=""> -->
                </div>
                <div class="dhq_text">
                  <h4 style="background:#e8e8e8;"></h4>
                  <h5 style="background:#e8e8e8;"></h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="h10"></div>
        <div class="near">
          <div class="near_title">
            <div class="near_title_l">
              <span class="active">附近商品</span>
              <span>附近店铺</span>
            </div>
            <div class="near_title_r">
              综合排序
            </div>
          </div>
          <div class="near_list">
            <div class="aui-content">
             <ul class="aui-list aui-media-list">
                 <li class="aui-list-item">
                     <div class="aui-media-list-item-inner">
                         <div class="aui-list-item-media">
                             <div style="background:#e8e8e8;height: 4rem;width:100%"></div>
                         </div>
                         <div class="aui-list-item-inner">
                             <div class="aui-list-item-text" style="background:#e8e8e8;height: 4rem;width:100%">
                             </div>
                             <div class="aui-list-item-text near_jj" style="background:#e8e8e8height: 4rem;;width:100%">

                             </div>
                             <div class="aui-info aui-margin-t-5" style="padding:0"  style="background:#e8e8e8height: 4rem;;width:100%">
                             </div>
                         </div>
                     </div>
                 </li>
               </ul>
            </div>
          </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/aui-slide.js"></script>


</html>
